<template>

    <view class="nav-left" >
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <!-- 修改颜色为黑色 -->
        <el-menu
            default-active="1"

            class="el-menu-vertical-demo dark-mode"
            router="true"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
        >
            <!-- 区域管理员设置 -->
            <el-menu-item index="/schoolET/admin2List" v-if="this.rule==='admin'">
                <el-icon><Management /></el-icon>
                <template #title>区域管理员设置</template>
            </el-menu-item>
            <!-- 区域管理员设置 -->
            <el-menu-item index="/schoolET/addrMana"  v-if="this.rule==='admin'">
                <el-icon><Location /></el-icon>
                <template #title>区域管理设置</template>
            </el-menu-item>
            <!-- 用户管理设置 -->
            <el-menu-item index="/schoolET/userPage">
                <el-icon><Avatar /></el-icon>
                <template #title>用户管理设置</template>
            </el-menu-item>
            
            <!-- 商品管理设置 -->
            <el-menu-item index="/schoolET/goodsPage">
                <el-icon><icon-menu /></el-icon>
                <template #title>商品管理设置</template>
            </el-menu-item>
            <!-- 类型管理设置 -->
            <el-menu-item index="/schoolET/typeList"  v-if="this.rule==='admin'">
                <el-icon><ScaleToOriginal /></el-icon>
                <template #title>类型管理设置</template>
            </el-menu-item>
            <!-- 类型管理设置 -->
            <el-menu-item index="/schoolET/newsPage">
                <el-icon><DocumentCopy/></el-icon>
                <template #title>新闻管理设置</template>
            </el-menu-item>
            <!-- 类型管理设置 -->
            <!-- <el-menu-item index="7">
                <el-icon><ChatDotRound /></el-icon>
                <template #title>聊天记录管理</template>
            </el-menu-item> -->
            <el-menu-item index="/schoolET/flowPage"  v-if="this.rule==='admin'">
                <el-icon><Coin /></el-icon>
                <template #title>交易流水</template>
            </el-menu-item>
            <el-menu-item index="/schoolET/adminDetail">
                <el-icon><EditPen /></el-icon>
                <template #title>平台信息</template>
            </el-menu-item>
        </el-menu>
    </view>
</template>

<script>
import {
  Management,
  Location,
  Avatar,
  Menu as IconMenu,
  ScaleToOriginal,
  DocumentCopy,
//   ChatDotRound,
  Coin,
  EditPen
} from '@element-plus/icons-vue'

    
    export default {
        name: "NavLeft",
        components: {
            Management,
            Location, 
            Avatar,
            IconMenu,
            ScaleToOriginal,
            DocumentCopy,
            // ChatDotRound,
            Coin,
            EditPen
        },
        data() {
            return {
                isCollapse: false,
                rule: null
            }
        },
        mounted() {
            // 获取本地存储
            this.rule=localStorage.getItem('rule')
            console.log(this.rule)
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style lang="scss">
    .nav-left{
        width: 180px;
        display: inline-block;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 180px;
    min-height: 400px;
    }

</style>